
// 模拟服务器上的传递过来的数据
let apiTypeData = [
    { name: "全部", keyword: "身份证实名", isnew: false },
    { name: "生活服务", keyword: "银行卡", isnew: false },
    { name: "金融科技", keyword: "短信", isnew: false },
    { name: "交通地理", keyword: "天气", isnew: false },
    { name: "充值缴费", keyword: "短信", isnew: false },
    { name: "数据智能", keyword: "手机归属地", isnew: false },
    { name: "企业工商", keyword: "IP", isnew: false },
    { name: "应用开发", keyword: "手机归属地", isnew: false },
    { name: "电子商务", keyword: "IP", isnew: false },
    { name: "吃喝玩乐", keyword: "视频", isnew: false },
    { name: "文娱视频", keyword: "视频", isnew: false },
    { name: "免费接口大全", keyword: "短信", isnew: true },
    { name: "短信", keyword: "身份证实名", isnew: false },
    { name: "汽车", keyword: "银行卡", isnew: false },
    { name: "核验", keyword: "银行卡", isnew: false },
    { name: "最新发布", keyword: "银行卡", isnew: true },
    { name: "API私有化部署", keyword: "身份证实名", isnew: true },
  ]


//需求:将apiTypeData中的数据组装渲染到apiHead中


//获取元素
let apiHead=document.querySelector('.api-head')
// console.log(apiHead);

//保存好组装的数据
let apiHtml='';

//遍历
apiTypeData.forEach(function(v){

    //拼装数据
    apiHtml+=`
        <a href="#" class="${v.isnew?'active':''}" data-keyword="${v.keyword}">${v.name}</a>
    `

})

//将拼装好的数据渲染到apiHead中
apiHead.innerHTML=apiHtml;



/**
 * 2.需求: 利用事件委派,给apiHead注册点击事件, 将当前事件源的文本渲染到apiTt, 获取当前事件源的自定义属性keyword,渲染给api-input
 * 注意: 事件委派中this不能代表当前触发对象,慎用
 *       事件委派中: 事件源 - e.target
 */
//获取元素
let apiTt=document.querySelector('.api-tt')
// console.log(apiTt);
let apiInput=document.querySelector('.api-input')
// console.log(apiInput);

apiHead.addEventListener('click',function(e){
    // console.log(123);
    if (e.target.nodeName === 'A') {
        apiTt.textContent = e.target.textContent;
    
        //获取当前事件源的自定义属性data-keyword//渲染到api-search-text
        apiInput.placeholder = e.target.dataset.keyword
    
    };

})



//API列表区域 模拟服务器返回的数据
let listDataArr = [
    //第一行
    { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
  
    //第二行
    { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
    //第三行
    { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
    //第四行
    { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
  
  ]

  /**
 * 4.需求: 遍历listDataArr,组装成HTML代码,并渲染到api-list
 */

//获取元素
let apiUl=document.querySelector('.api-ul')
// console.log(apiUl);
//定义变量保存HTML代码
let listDataHtml = ''


listDataArr.forEach(function(v){
// console.log(v);

// 组装数据
listDataHtml+=`
    <li>
        <span class="enterprise ${v.isSpecial ? 'isShow' : ''}">企业专用</span>
        <div class="api-content">
            <a href='../page/api详情页.html'>
            <img src="../imgs/${v.img}" alt="">
            <p>${v.name}</p>
            <p class="${v.price === '免费' ? 'green' : 'red'}">${v.price}</p>
            </a>
        </div>
        <button class="api-apply">申请数据</button>
    </li>
`


})

//渲染到页面api-list中
apiUl.innerHTML = listDataHtml





















//需求:点击api-ul下的button按钮,显示mask
//获取元素
let sBtn=document.querySelectorAll('.api-ul button')
// console.log(sBtn);
let mask=document.querySelector('.mask')
let modal=document.querySelector('.modal')



sBtn.forEach(function(dom){
    dom.addEventListener('click',function(){
        // console.log(1);
        mask.style.display='block'
        modal.style.display='block'
    })
})


//需求:点击modal,隐藏mask
mask.addEventListener('click',function(){
    // console.log(2);
    mask.style.display='none'
    modal.style.display='none'
})